import React, { useState } from "react";
import { Routes, Route } from "react-router-dom";
import utils from "../util/utils";

import WebTool from "../components/WebTool/WebTool";
import OnlineChat from "../components/OnlineChat/OnlineChat";

const Home = React.lazy(() => import("./Home/Home.jsx"));

const LessonList = React.lazy(() =>
  import("./Lesson/LessonList/LessonList.jsx")
);
const LessonDetail = React.lazy(() =>
  import("./Lesson/LessonDetail/LessonDetail.jsx")
);
const ClassHour = React.lazy(() => import("./Lesson/ClassHour/ClassHour.jsx"));

const BlogList = React.lazy(() => import("./Blog/BlogList/BlogList.jsx"));
const BlogDetail = React.lazy(() => import("./Blog/BlogDetail/BlogDetail.jsx"));

const Creative = React.lazy(() => import("./Creative/Creative/Creative.jsx"));
const Editor = React.lazy(() => import("./Creative/Editor/Editor.jsx"));
const Video = React.lazy(() => import("./Creative/Video/Video.jsx"));

const SenderTest = React.lazy(() => import("./Test/SenderTest/SenderTest.jsx"));
const CustomerTest = React.lazy(() =>
  import("./Test/CustomerTest/CustomerTest.jsx")
);

function App() {
  const [onlineBoxIsShow, setOnlineBoxIsShow] = useState(false);
  const from = utils.getGD("UserBaseInfo");
  const to = {
    UserId: "88888888",
    Nickname: "客服",
    AvatarUrl:
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cx6658.com%2Fuploads%2F20190625%2F20292wdmcpw2omk.jpg&refer=http%3A%2F%2Fwww.cx6658.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669642373&t=fc6de1ca24d8b8e5bd614c7d521c6618",
  };

  return (
    <React.Fragment>
      <React.Suspense fallback={<h2> 加载中...</h2>}>
        <Routes>
          <Route path="/" element={<Home />}></Route>

          <Route path="/LessonList" element={<LessonList />}></Route>
          <Route path="/LessonDetail/:Id" element={<LessonDetail />}></Route>
          <Route path="/ClassHour/:Id" element={<ClassHour />}></Route>

          <Route path="/BlogList" element={<BlogList />}></Route>
          <Route path="/BlogDetail/:Id" element={<BlogDetail />}></Route>

          <Route path="Creative" element={<Creative />}>
            <Route path="Editor" element={<Editor />}/>
            <Route path="Video" element={<Video />}/>
            
          </Route>
         

          <Route path="/SenderTest" element={<SenderTest />}></Route>
          <Route path="/CustomerTest" element={<CustomerTest />}></Route>
        </Routes>
      </React.Suspense>

      <WebTool setOnlineBoxIsShow={setOnlineBoxIsShow}></WebTool>
      {onlineBoxIsShow && (
        <div className="app-online-chat-wrap">
          <div style={{ width: "25rem", height: "31.25rem" }}>
            <OnlineChat
              setOnlineBoxIsShow={setOnlineBoxIsShow}
              from={from}
              to={to}
            ></OnlineChat>
          </div>
        </div>
      )}
      {/* {onlineBoxIsShow && (
        <OnlineChat
          setOnlineBoxIsShow={setOnlineBoxIsShow}
          IsCustomer={true}
        ></OnlineChat>
      )} */}
    </React.Fragment>
  );
}

export default App;
